<template>
  <div>
    <!-- 积分标题 -->
    <van-nav-bar title="积分商城" fixed />
    <!-- 当前用户积分信息 -->
    <div class="nav_title">
      <!-- 积分商城背景图 -->
      <img
        src="../../assets/images/Vipaha/12.png"
        alt=""
        style="height: h; width: w"
      />
      <!-- 头像 -->
      <div class="head_pic">
        <img :src="icon" alt="" />
        <span>
          <strong style="color: #fff">-&nbsp;{{ uname }}&nbsp;-</strong>
          <br />
          <p style="color: #fff">LV&nbsp;1</p>
        </span>
        <router-link to="/vip">立即续费</router-link>
      </div>
      <div class="content">
        <div class="box">
          <span class="score">积分：{{ integral }}</span>
          <span class="kuang"></span>
          <van-button
            color="transparent"
            icon="../../../public/images/Card/4icon.png"
            type="info"
            @click="doIt"
            >大转盘</van-button
          >
        </div>
      </div>
    </div>
    <div class="details" style="margin: 0 0 10px 1rem; font-weight: 600">
      积分兑换
    </div>
    <!-- 积分列表 -->
    <van-list>
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        @click="doClick(index)"
      >
        <div class="item">
          <div class="item1">
            <img src="../../../public/img/exchange.png" alt="" />
          </div>
          <div class="item2">
            <p class="p1 fontSize-l">{{ item.title1 }}</p>
            <p class="p2 fontColor-org">消耗{{ item.score }}积分</p>
            <p class="p3 fontColor-yel">{{ item.msg }}</p>
          </div>
        </div>
        <hr />
      </van-cell>
    </van-list>
    <div class="exchange">
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" title="sdfsdfsdfds" @click.stop>
          <div class="block" title="坦克子弹">
            <div class="nav">
              <h3>积分使用规则</h3>
              <span @click="show = false">X</span>
            </div>
            <div class="blockli">
              <br />
              <h3>1. 积分获取</h3>
              <br />

              a) 积分专属邮乐,仅限邮乐网内使用<br /><br />
              b)积分可以累积,2年内有效<br /><br />
              c)买家在邮乐网消费购物可以获得积分,积分返点比例为:除3C产品外的所有商品均以2元:1积分计,3C产品以10元:1积分计,购买的商品页面中显示积分为零的商品不享受积分获取<br /><br />
              d)积分的数值精确到个位(小数点后全部舍弃,不进行四舍五入),例如:**101元的商品,返50(101*0.5=50.5)个积分;
            </div>
          </div>
        </div>
      </van-overlay>
      <p
        @click="show = true"
        style="
          text-align: center;
          padding: 16px 0 30px 0;
          text-decoration: underline;
          color: #000;
          text-decoration: none;
        "
      >
        积分规则
      </p>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant"
export default {
  data() {
    return {
      components: {
        [Dialog.Component.name]: Dialog.Component,
      },
      // 积分列表
      list: [
        {
          // pic: "/img/exchange.png",
          title1: "满200减20",
          score: 20,
          msg: "正在抢兑中...",
          lid: 1,
        },
        {
          // pic: "/img/exchange.png",
          title1: "满300减30",
          score: 30,
          msg: "正在抢兑中...",
          lid: 2,
        },
        {
          // pic: "/img/exchange.png",
          title1: "满400减40",
          score: 40,
          msg: "正在抢兑中...",
          lid: 3,
        },
      ],
      show: false,
      h: "7.4375rem",
      w: "16rem",
      num1: 20,
      num2: 30,
      num3: 40,
      integral: "",
      uname: "",
      icon: "",
    }
  },
  //获取用户积分
  mounted() {
    //console.log("获取用户积分成功");
    let token = localStorage.getItem("token")
    let url = "/v1/integral/get"
    this.$get(url, token).then(res => {
      if (token == null) {
        this.$toast("请登录")
        this.$router.push("/usercenter")
      } else {
        //拿到数据库的个人信息数据
        this.data = res.data.data[0]
        console.log(this.data)
        //把个人信息积分数据渲染到界面
        this.integral = this.data.user_integral
        //把个人信息姓名数据渲染到界面
        this.uname = this.data.uname
        //把个人信息头像数据渲染到界面
        this.icon = this.data.user_icon
      }
    })
  },
  methods: {
    test(val) {
      //console.log("我是", this.list[val].lid);
    },
    onClickLeft() {
      this.$router.push("/usercenter")
    },
    doIt() {
      this.$router.push("/turntable")
    },
    doClick(index) {
      //判断用户积分值是否大于积分兑换券所消耗的积分数值，不大于则提示积分不足，大于则消耗积分，换购优惠券
      if (this.integral >= this.list[index].score) {
        //         //前台给假值，在前台进行减操作
        //         this.integral -= this.list[index].score;
        //         {
        //           //  积分换优惠券，并存入到数据库
        //           // 兑换  method=1
        //           let method = 1;
        //           let token = localStorage.getItem("token");
        //           let params = { token: token, lid: this.list[index].lid, method };
        //           let url = "/v1/integral/update";
        //           this.$post(url, params).then((res) => {
        //           //console.log(res);
        Dialog.confirm({
          title: "优惠券",
          message: "是否兑换优惠券",
        })
          .then(() => {
            this.integral -= this.list[index].score
            {
              //  积分换优惠券，并存入到数据库
              // 兑换  method=1
              let method = 1
              let token = localStorage.getItem("token")
              let params = { token: token, lid: this.list[index].lid, method }
              let url = "/v1/integral/update"
              this.$post(url, params).then(res => {
                //console.log(res);
              })
            }
            //减取对值
            // 你要修改的值
            let subtract = this.list[index].score
            //获取页面上的localStorage  token
            let token = localStorage.getItem("token")
            // 对接地址一定要和后台相同 自己去理解什么是一样的
            let url = "/v1/integral/upd"
            // 获取的值去传参
            let params = { token: token, subtract: subtract }
            //放在什么地方
            // this.$get(url, params).then((res) => {
            //   //接受返回来的值
            // //console.log(res);
            // });
          })
          .catch(() => {
            // on cancel
          })
      } else {
        // 积分不足
        this.$toast("您的积分不足")
      }
    },
  },
}
</script>
<style scoped lang="scss">
img {
  width: 100%;
}
.nav_title {
  position: relative;
  margin-top: 2.9375rem;
  img {
    display: inline-block;
  }
}
.head_pic {
  margin-left: 0.9375rem;
  position: absolute;
  top: 1.25rem;
  img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    vertical-align: middle;
  }
  span {
    margin: 0 1rem;
    position: absolute;
    top: 13%;
    strong {
      font-size: 1.3rem;
    }
    p {
      display: inline-block;
      background: #c2beb9;
      padding: 0.1rem 0.3rem;
      border-radius: 0.2rem;
      margin-top: 0.8rem;
      font-size: 0.8rem;
    }
  }
  a {
    width: 8rem;
    text-align: center;
    display: block;
    padding: 0.4rem 0;
    background: url("../../../public/images/Vip/7.png");
    // background-size: 100%;
    color: #fff;
    border-radius: 0.4rem;
    position: absolute;
    left: 1rem;
    top: 6rem;
    // bottom: -3rem;
  }
}
.content {
  position: relative;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  border-bottom: 0.0625rem solid #9e9494;
}
.content .box {
  /* position: absolute;
  left: 50%;
  transform: translateX(-50%); */
  display: flex;
  // justify-content: space-around;
  text-align: center;
  button {
    div {
      span {
        color: #3f3f3f;
      }
    }
  }
  .score {
    // background-color: #ff4001;
    // color: #fff;
    width: 50%;
    line-height: 2.75rem;
  }
  .kuang {
    display: block;
    width: 0.1rem;
    height: 2rem;
    border-right: 1px solid #3f3f3f;
    margin-top: 0.4rem;
  }
  button {
    margin: 0 auto;
    border: none;
    div {
      span {
        font-size: 1rem;
        text-align: center;
      }
    }
  }
  // .van-button--info {
  //   width: 50%;
  //   color: #1e6fff !important;
  // }
}
.details {
  height: 1.25rem;
  margin-top: 3.625rem;
}
.details p {
  font-size: 1.3rem;
  line-height: 0.625rem;
  font-weight: 500;
}

.exchange {
  background-color: white;
  margin-bottom: 3.25rem;
}
.exchange .item {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: 0.625rem;
  border-bottom: 0.0625rem solid gray;
}
.exchange .item img {
  width: 45%;
}
.exchange .item p {
  margin: 0.625rem;
}
.exchange .item .p1 {
  font-size: 0.9375rem;
}
.exchange .item .p2 {
  font-size: 0.875rem;
  color: red;
}
.exchange .item .p3 {
  font-size: 0.875rem;
  color: chocolate;
}
.block .nav {
  width: 89%;
  height: 3.125rem;
  position: fixed;
  text-align: center;
  margin: auto;
  line-height: 3.125rem;
  background-color: white;
}
.block .nav span {
  position: absolute;
  top: 0rem;
  float: right;
  right: 1rem;
  color: orange;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  overflow-y: auto;

  width: 90%;
  height: 31.25rem;
  background-color: #fff;
}
.block .blockli {
  margin-top: 3.125rem;
  padding: 0px 1rem;
}
.item {
  display: flex;
  .item1 {
    width: 55%;
  }
  .item2 {
    width: 45%;
    // text-align: center;
    margin: 1rem 0 0 1rem;

    p {
      margin: 0px 0 0 5px;
    }
  }
}
.fontSize-l {
  font-size: 16px;
  font-weight: 600;
}
.fontSize-m {
  font-size: 14px;
}
.fontColor-org {
  color: #ff4001;
}
.fontColor-yel {
  color: #cea461;
}
.fontColor-bla {
  color: #646566;
}
</style>
